<template>
  <div>
    <el-form
      label-position="right"
      label-width="80px"
      :model="loginInfo"
      :rules="rules"
      ref="ruleForm"
    >
      <template v-for="(item, index) in loginConfig" :key="index">
        <el-form-item :label="item.label" :prop="item.prop">
          <template v-if="item.type == 'input'">
            <div style="display: flex; align-items: center">
              <el-icon :size="20" color="red">
                <avatar />
              </el-icon>
              <el-input v-model="(loginInfo as any)[item.prop]"></el-input>
            </div>
          </template>
          <template v-if="item.type == 'password'">
            <div class="inp">
              <el-icon :size="20" color="red">
                <lock />
              </el-icon>
              <el-input
                v-model="(loginInfo as any)[item.prop]"
                type="password"
              ></el-input>
            </div>
          </template>
        </el-form-item>
      </template>

      <el-form-item>
        <el-radio v-model="radio1" :label="true">记住用户名和密码</el-radio>
        <el-radio v-model="radio1" :label="false">暂不需要</el-radio>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submit">登录</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue"
import { loginConfig, loginRules } from "../config/config"
import CacheLocal from "@/utils/cacheLocal"
import FormHandle from "@/hooks/formHandle"
import { useStore, newUseStore } from "@/store"
import { useRouter } from "vue-router"
import Validate from "@/hooks/validate"
import { ElForm, ElMessage } from "element-plus"
type loginType = {
  userName: string
  password: string
  checkPassword: string
}

const router = useRouter()
const store = newUseStore()
const ruleForm = ref<InstanceType<typeof ElForm>>()

const radio1 = ref(true)
// const loginInfos = reactive({ ...props.loginInfo })
const loginInfo: loginType = reactive({
  userName: CacheLocal.getItem("LSName") || "",
  password: CacheLocal.getItem("LSPwd") || "",
  checkPassword: CacheLocal.getItem("LSPwd") || ""
})

const check = (rule: any, value: any, cb: any) => {
  if (!loginInfo.checkPassword) {
    cb(new Error("请再次输入密码"))
  } else if (loginInfo.checkPassword !== loginInfo.password) {
    cb(new Error("两次密码输入不一致"))
  } else {
    cb()
  }
}

// 在执行 this.$refs[formName].validate((valid) => {}) 时候，内部代码一直不会执行，最后发现在自定义验证里面每一个判断都要有callback(),就是要保证callback()一定会执行到
const rules = {
  ...loginRules,
  checkPassword: [{ validator: check, trigger: "blur", required: true }]
}

//重置
// const reset = () => ruleForm.value.resetFields()
const reset = () => FormHandle.formReset(loginInfo)

//提交
const submit = async () => {
  const validRes = await Validate.formValidate(ruleForm.value!)
  if (validRes) {
    if (radio1.value) {
      CacheLocal.setItem("LSName", loginInfo.userName)
      CacheLocal.setItem("LSPwd", loginInfo.password)
      console.log("保存用户名，密码")
    }
    const { userName, password } = loginInfo
    // const loginRes = await store.dispatch("moduleUser/userLogin", {
    //   userName,
    //   password
    // })

    // const loginRes = await store.lsActions.moduleUser.userLogin({
    //   userName,
    //   password
    // })
    const loginRes = await store.dispatch(
      store.lsActions.moduleUser.userLogin(),
      {
        userName,
        password
      }
    )

    if (loginRes) {
      ElMessage({
        message: loginRes,
        type: "success"
      })
      router.push("/main")
    }
  }
}
</script>

<style lang="less" scoped>
.inp {
  display: flex;
  align-items: center;
  position: relative;
  .icon {
    position: absolute;
    left: 1vw;
  }
}
</style>
